<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base

    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->
  <base href="$FLUTTER_BASE_HREF">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="Pdf Printing Demo">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Flutter PDF Demo">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>Flutter PDF Demo</title>
  <link rel="manifest" href="manifest.json">
  <style type="text/css">
    #loading {
      position: absolute;
      width: 400px;
      height: 300px;
      top: 50%;
      left: 50%;
      margin: -200px 0 0 -200px;
      text-align: center;
      font-family: sans-serif
    }

    #progress {
      margin-top: 20px;
      height: 10px;
      background-color: #ebebeb;
    }

    #progress div {
      background-color: #08a5d7;
      height: 100%;
      width: 0;
      transition: width ease-out 300ms;
    }

    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
      }

      #loading {
        color: white;
      }

      #progress {
        background-color: #393939;
      }
    }
  </style>
</head>

<body>
  <div id="loading">
    <img src="icons/Icon-192.png" width="192" height="192" alt="">
    <h1>Flutter PDF Demo</h1>
    <div id="progress">
      <div></div>
    </div>
  </div>
  <script>
    {{flutter_js}}
    {{flutter_build_config}}

    function progress(value) {
      let el = document.getElementById("progress");
      if (el) el.firstElementChild.style.width = value + "%";
    }

    window.addEventListener('load', function (ev) {
      progress(30);
    });


    window.addEventListener('flutter-first-frame', function () {
      let el = document.getElementById("loading");
      if (el) el.remove();
    });

    _flutter.loader.load({
      onEntrypointLoaded: async function (engineInitializer) {
        progress(60);
        const appRunner = await engineInitializer.initializeEngine();
        progress(100);
        await new Promise(resolve => setTimeout(resolve, 200));
        await appRunner.runApp();
      }
    });
  </script>
</body>
</html>
